<template>
	<view class="box">
		<!-- 页面头部 -->
		<div class="head">
			<!-- 返回按钮 -->
			<img src="../../static/img/fanhui.png" alt="" class="return_botton">
			<!-- 页面标题 -->
			<p class="title">正在进行的公益活动</p>
		</div>
		<!-- 占位 -->
		<div class="mark_one"></div>
		<!-- 内容区 -->
		<div class="content">
			<!-- 内容图片 -->
			<img src="../../static/img/2.jpg" alt="" class="content_img">
				<!-- 活动标题 -->
			<span class="content_title">陪伴敬老院孤寡老人活动</span>
			<!-- 结束时间文字 -->
			<span class="over_time_word">结束时间</span>
			<!-- 结束时间 -->
			<span class="over_time">2019年10月11日</span>
			<!-- 进度条灰色 -->
			<div class="strip_grey"></div>
			<!-- 进度条橙色 -->
			<div class="strip_orange"></div>
			<!-- 目标人数字 -->
			<p class="goal_number_word">目标人数</p>
			<!-- 目标人数 -->
			<p class="goal_number">150</p>
			<!-- 人 -->
			<p class="word">人</p>
			<!-- 召集人数字 -->
			<p class="number_word">召集人数</p>
			<!-- 召集人数 -->
			<p class="number">120</p>
			<!-- 人 -->
			<p class="word_to">人</p>
		</div>
		<div class="content">
			<!-- 内容图片 -->
			<img src="../../static/img/2.jpg" alt="" class="content_img">
				<!-- 活动标题 -->
			<span class="content_title">陪伴敬老院孤寡老人活动</span>
			<!-- 结束时间文字 -->
			<span class="over_time_word">结束时间</span>
			<!-- 结束时间 -->
			<span class="over_time">2019年10月11日</span>
			<!-- 进度条灰色 -->
			<div class="strip_grey"></div>
			<!-- 进度条橙色 -->
			<div class="strip_orange"></div>
			<!-- 目标人数字 -->
			<p class="goal_number_word">目标人数</p>
			<!-- 目标人数 -->
			<p class="goal_number">150</p>
			<!-- 人 -->
			<p class="word">人</p>
			<!-- 召集人数字 -->
			<p class="number_word">召集人数</p>
			<!-- 召集人数 -->
			<p class="number">120</p>
			<!-- 人 -->
			<p class="word_to">人</p>
		</div>
	</view>
</template>

<script>
</script>

<style scoped>
	/* 页面头部  */
	.head{
	    position: fixed;
	    top: 0px;
	    left: 0px;
	    width: 100%;
	    height: 96rpx;
	    line-height: 96rpx;
	    border-bottom: #EDEDED 1px solid;
	    background-color: white;
	    /* 高 行高 76 */
	 
	}
	/* 返回按钮 */
	.return_botton{
	    float: left;
	    margin-top: 30rpx;  /* 20 */
		margin-left: 20rpx;
	    float: left;
	    width: 36rpx;    /* 36 */
	    height: 36rpx;
	
	}
	/* 页面标题 */
	.title{
	    float: left;
	    margin-left: 199rpx;   /* 199 */
	    font-size: 31rpx;    /* 31px */
	    font-weight: bold;
	    text-align: center;
	}
	/* 占位div */
	.mark_one{
	    height: 96rpx;
	    /* 76 */
	}
	/* 内容区 */
	.content{
	    margin: 0 auto;
	    margin-top: 22rpx;  /* 22 */
	    width: 701rpx;  /* 701 */
	    height: 181rpx;   /* 181 */
	    background-color: white;
	    border-radius: 9rpx;   /* 9 */
	    box-shadow: 18rpx 18rpx 54rpx 18rpx #F5F5F5;   /* 18 18 54 18 */
	}
	/* 内容图片 */
	.content_img{
	    float: left;
	    width: 254rpx;   /* 254 */
	    height: 159rpx;   /* 159 */
	    margin-left: 11rpx;
	    margin-top: 11rpx;
	    /* 11 */
	
	}
	/* 内容标题 */
	.content_title{
	    float: left;
	    margin-top: 11rpx;   /* 11 */
	    margin-left: 18rpx;  /* 18 */
	    font-size: 25rpx;  /* 25 */
	    font-weight: bold;
	}
	/* 结束时间文字 */
	.over_time_word{
	    float: left;
	    margin-top:62rpx ;    /* 62 */
	    margin-left: -259rpx;  /* -279 */
	    font-size: 22rpx;   /* 22 */
	    color: #B5B5B5;
	}
	/* 结束时间 */
	.over_time{
	    float: left;
	    margin-top:62rpx ;   /* 62 */
	    margin-left: -160rpx;     /* -190 */
	    font-size: 22rpx;    /* 22 */
	    color: #B5B5B5;
	}
	/* 进度条灰色 */
	.strip_grey{
	    float: left;
	    width: 308rpx;    /* 308 */
	    height: 18rpx;
	    background-color:#EAEAEA;
	    border-radius: 18rpx;
	    margin-left: 18rpx;
	    margin-top: 18rpx;
	    /* 18 */
	}
	/* 进度条橙色 */
	.strip_orange{
	    float: left;
	    width: 243rpx;  /* 243 */
	    height: 18rpx;
	    background-color:#FF6200;
	    border-radius: 18rpx;
	    margin-left: 18rpx;
	    /* 18 */
	    margin-top: -18rpx; /* -18 */
	}
	/* 目标人数字 */
	.goal_number_word{
	    float: left;
	    margin-top: 13rpx;  /* 13 */
	    margin-left: 18rpx;   /* 18 */
	    font-size: 22rpx;    /* 22 */
	    color: #B5B5B5;
	}
	/* 目标人数 */
	.goal_number{
	    float: left;
	    margin-top:11rpx ;   /* 9 */
	    margin-left:5rpx ;   /* 5 */
	    font-size: 25rpx;    /* 25 */
	    color: #FF6200;
	}
	/* 人 */
	.word{  
	    float: left;
	    margin-top:13rpx ; /* 13 */
	    margin-left:5rpx ;   /* 5 */
	    font-size: 22rpx;  /* 22 */
	    color: #B5B5B5;
	}
	/* 召集人数字 */
	.number_word{
	    float: left;
	    margin-top: 13rpx;   /* 13 */
	    margin-left: 63rpx; /* 63 */
	    font-size: 22rpx;   /* 22 */
	    color: #B5B5B5;
	}
	/* 召集人数  */
	.number{
	    float: left;
	    margin-top: 11rpx;
	    margin-left: 9rpx;
	    /* 9 */
	    font-size: 25rpx;  /* 25 */
	    color: #FF6200;
	}
	/* 人  */
	.word_to{
	    float: left;
	    margin-top: 7px;  /* 13 */
	    margin-left: 5px;   /* 9 */
	    font-size: 22rpx;    /* 22 */
	    color: #B5B5B5;
	}
</style>
